<template>
  <div class="company-list-1">
    <div class="header">
      <div class="prefix"></div>
      <div class="header-title">任务分配趋势分析</div>
    </div>
    <div class="content">
      <div style="width: 100%; height: 200px">
        <MyEchart :option="dataSource"></MyEchart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watchEffect } from 'vue'
import MyEchart from '@/components/echarts/MyCharts2.vue'

const props = defineProps({
  info: {
    type: Array,
    default: () => []
  }
})

const dataSource = ref()

watchEffect(() => {
  const xdate = []
  const SHIPMENT_DATA = []
  props.info.forEach((item) => {
    xdate.push(item.time)
    SHIPMENT_DATA.push(item.count)
  })

  dataSource.value = {
    tooltip: {
      // 提示框组件
      trigger: 'axis', // 坐标轴触发
      // 提示框浮层内容格式器：自定义
      formatter: `
      <span class="chart-title">{b}数量</span><br />
      <h4 class="chart-data">
        数量： <span>{c0}</span>次<br />
      </h4>
    `,
      valueFormatter: () => '', // tooltip 中数值显示部分的格式化回调函数
      axisPointer: {
        // 指示器样式
        type: 'line',
        label: {
          backgroundColor: '#44c98b'
        },
        lineStyle: {
          type: 'dashed',
          color: '#87B1FE'
        }
      }
    },
    grid: {
      // 图表位置
      left: '2%',
      top: '20%',
      right: '5%',
      bottom: '2%',
      containLabel: true
    },
    xAxis: [
      // x轴
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {
          show: false
        },
        data: xdate // x轴数据
      }
    ],
    yAxis: [
      // y轴
      {
        type: 'value',
        name: '数量',
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '办件数量', // 系列名称
        color: '#44c98b', // 颜色
        type: 'line', // 图表类别
        /*
        'samesign' 只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠。
        'all' 堆叠所有的值，不管当前或累积的堆叠值的正负符号是什么。
        'positive' 只堆积正值。
        'negative' 只堆叠负值。
      */
        stack: 'Shipment', // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
        symbol: 'circle',
        lineStyle: {
          // 线条样式
          color: '#44c98b'
        },
        emphasis: {
          // 折线图的高亮状态
          /*
            'none' 不淡出其它图形，默认使用该配置。
            'self' 只聚焦（不淡出）当前高亮的数据的图形。
            'series' 聚焦当前高亮的数据所在的系列的所有图形。
          */
          focus: 'series'
        },
        data: SHIPMENT_DATA
      }
    ]
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/table.css';

.company-list-1 {
  padding: 10px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 16px;

  .header {
    width: 350px;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .prefix {
      width: 8px;
      height: 15px;
      background-color: #31a7ff;
    }

    .header-title {
      padding-left: 10px;
    }
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 10px;

    .alarm {
      width: 100%;

      &-top {
        display: flex;
        justify-content: space-between;

        &-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
